<!--红云超市-->
<template>
      <div class="score-hd">
        <div class="score-head">
          <div @click.stop="go('changeAvatar')" class="avatar-img"><img :src="tools.getAvatarUrl(userInfo.id)+'&'+Date.now()" alt="" @click.stop="go('changeAvatar')"></div>
        </div>
        <div class="score-text">
          <p class="score-tip"  @click="detail()"><span class="score">{{myIntegrals.totalScore}}</span><span class="score-tip-text">积分</span><img src="../../../../static/images/arrow_left_white.png" alt=""></p>
<!--          <p class="tip">做任务赚积分，积分万能兑</p>-->
        </div>
<!--        新超市-->
        <div class="score-play" v-if="true" @click="settlementList"><img src="../../../../static/images/store-settlement.png" alt="">入驻申请</div>
<!--        正常超市-->
<!--        <div class="score-play" v-if="getKey==='0'" @click="exchangeRecord"><img src="../../../../static/images/duihuan.png" alt="">兑换记录</div>-->
        <div class="score-none" v-else=""></div>
      </div>
</template>

<script>
  import progressBar from '@/components/common/progressBar.vue'
  import supermarketMenu from '@/components/dangjian/mall/supermarketMenu.vue'
  import happyShopping from '@/components/dangjian/mall/happyShopping.vue'
  import loginService from "@/service/loginService";
  import moment from 'moment'
  import tools from '@/utils/tools'
  import api from "@/common/config/api";

  export default {
    components: {progressBar, supermarketMenu, happyShopping},
    name: 'supermarketHome',
    data () {
      return {
        currentIndex: '1',
        isLoading: true,
        options: {
          pullUpLoad: true,
          scrollbar: false,
        },
        fn: tools,
        pageIndex: 1,
        userInfo: {},
        partyInfo: {},
        sysFile: {},
        todayData: {},
        myIntegrals: {},
        swipeData: [],
        ticketInfo: {},
        isShow: 0,
        getDict: [],
        getKey:'1' //判断是否走新页面 1 走老页面 0 新页面
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      let pInfo = this.$localStorage.get('partyInfo')
      if (pInfo) {
        this.partyInfo = pInfo
      }
      this.myIntegral();
      // this.getData();
      this.getDictValue();
    },
    methods: {
      //点击兑换
      exchange () {
        this.$router.push({path: 'mallForRecordDetail'})
      },
      //兑换记录
      // exchangeRecord() {
      //   this.$router.push({path: 'mallForRecordList'})
      // },
      settlementList(){
        // this.$router.push({path: 'settlementList'})//跳转到申请列表
        //直接跳到详情
        let data = {
          "pageNo":  1,
          "pageSize": 10,
        }
        loginService.postConsultInfoList(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message);
          }
          let settlementList = res.data
          if(settlementList.length>0){
            this.$router.push({ path: `/settlementAdd`,name:'settlementAdd', params:{form: res.data[0],status:false} });//跳转到申请详情
          }else{
            this.$router.push({
              path: `/settlementAdd`,
            });
          }
        });
      },
      go (path) {
        this.$router.push({path: path})
      },
      //积分详情
      detail() {
        this.$router.push({path: 'scoreDetail'})
      },
      showFun(val) {
        this.isShow = val;
      },
      //请求字典值
      getDictValue () {
        let data={
          catKey:'CAT_MALL_',
          treeKey:'MERCHANTS_TYPE_'
        }
        this.fetchService.dictValue(data).then(res => {
          console.log('this.fetchService.dictValue',res.data)
          if(res.code === 0){
            this.getDict=res.data
          }
        })
      },

      myIntegral () {
        let data = {
          userId: this.userInfo.id
        }
        this.fetchService.myIntegral(data.userId).then(res => {
          if (res.code !== 0) {
             return tools.tip(res.message)
          }
          this.myIntegrals = res.data
        })
      },
      getTicket() {
        let parame = {
          "pageNo": 0,
          "pageSize": 0,
          "pointPriceEnd": 0,
          "pointPriceStart": 0,
          "publishStatus": 0,
          "storeId": "",
          "verifyStatus": 0
        }
        this.fetchService
        .mallProductHybPage(parame)
        .then((res) => {
          /* if (res.code !== 0) {
          return tools.tip(res.message);
        } */
          if (res.code == 0) {
            this.ticketInfo = res.data[0];
          }
        });
      },
      getData() {
        this.isLoading = true;
        let parame = {
            "pageNo": this.pageIndex + "",
            "pageSize": 20,
            "pointPriceEnd": '',
            "pointPriceStart": '',
            "publishStatus": '',
            "verifyStatus": ''
        }
        this.fetchService
        .mallProductHotPage(parame)
        .then((res) => {
          this.isLoading = false;
          if (res.code !== 0) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            return tools.tip(res.message);
          }
          this.pageIndex++;
          this.swipeData = this.swipeData.concat(res.data);
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
              this.$refs.scroll.forceUpdate(true, false);
            this.options.isPullUpLoad = false;
          }, 100);
          console.log("33334444",res.data)
          this.swipeData = res.data;
        });
      },
      onPullingUp() {
        console.log("onPullingUp");
        this.getData();
      },
      //请求字典值
      /*getDictValue() {
        let data = {
          catKey: "CAT_MALL_",
          treeKey: "IS_OPEN",
        };
        this.fetchService.dictValue(data).then((res) => {
          console.log("this.fetchService.dictValue", res.data);
          if(res.code !== 0){
            return
          }
          if (res.code === 0 && res.data.length>0) {
            this.getKey = res.data[0].key;
            console.log('this.getDict',this.getKey);
          }else{
            this.getKey = '1'
          }
        });
      },*/
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .mine-page{
    /* background: url("../../../static/images/dangjian/mine/bg-mine-hd.png") $bg-color no-repeat center #{pxToRem($head-height)};
    background-size: 100% auto; */
    padding:0;
    .header {
      justify-content: space-between;
      margin-bottom: pxToRem(0px);
      position: relative;
      .message {
        .head-btn-text {
          font-size: 14PX;
        }
      }
    }
  }

  .score-hd {
    height:200px;
    text-align: center;
    background: url("../../../../static/images/bg-mine-hd2.png") $theme-color no-repeat center;
    background-size: 100% auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .score-head {
        width: 118px;
        height: 118px;
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid #EA7676;
        background: #ffffff;
      img {
        height: 100%;
        width: 100%;
      }
    }

    .score-text {
      margin-right: 50px;
      text-align: left;

      .score-tip {
        .score-tip-text {
          font-size: 12PX;
          vertical-align: super;
          color: #ffffff;
          margin-right: 15px;
        }
      }
      img {
        width: 15px;
        margin-bottom: 5px;
      }
    }

    .score-play {
      width: 171px;
      height: 46px;
      line-height: 46px;
      background: #E20001;
      border: 1px solid #FFFFFF;
      border-radius: 10px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.5rem;
        height: 0.5rem;
        vertical-align: text-top;
        margin-right: 5px;
      }
    }
    .score-none {
      width: 171px;
      height: 46px;
    }

    .score {
      font-size:56px;
      line-height:1.2em;
      font-weight:400;
      color:rgba(255,255,255,1);
      margin-right: 10px;
    }

    .tip {
      font-size:12PX;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }

  .screen {
    width: 100%;
    height: 108px;
    background: #fff;
    .screen-menu {
      height: 100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding: 0 20px;
      li {
        font-size: 14PX;
        padding: 6px 10px;
        border: 1px solid #E5E5E5;
        border-radius: 10px;
        &.active {
          border: 1px solid #E20002;
          font-weight: bold;
          color:#E20002;
        }
      }

    }
  }

  .red-car {
    position: relative;
    margin-top:-60px;
    background:#fff;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    padding:29px 34px;
    margin-bottom:0;
    &::after {
      position:absolute;
      top:50%;
      right:40px;
      transform:translateY(-50%);
      content:'';
      width: pxToRem(16px);
      height: pxToRem(25px);
      background:rgba(199,199,204,1);
      background: url("../../../../static/images/dangjian/dangwu/arrow-left.png") no-repeat center;
      background-size: auto 100%;
    }

    .img {
      width:101px;
      height:94px;
      margin-right:32px;
      img {
        @include fullImg();
      }
    }

    .cont {
      .title {
        font-size:30px;
        line-height: 1em;
        font-weight:400;
        color:rgba(51,51,51,1);
      }

      .tip {
        font-size:24px;
        font-weight:400;
        color:rgba(153,153,153,1);
      }
    }
  }

  .goods-list {
    margin: 3%;
    .ticketInfo {
    width: 100%;
    height: 190px;
    img {
      width: 100%;
      height: 100%;
    }
    }
    .hd {
      .hd-title {
        font-size: 36px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }

      .tip {
        font-size:24px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:60px;
        span {
          padding-left:10px;
        }
      }
    }

    .item {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:37px 0;
      border-bottom:1px solid $border-color;
      &:last-child {
        border:none;
      }
      .cont {
        display:flex;
        justify-content: space-between;
        align-items:center;
        .img {
          width:140px;
          height:140px;
          position: relative;
          overflow: hidden;
          border-radius:10px;
          text-align: center;
          margin-right:25px;
          img {
            position: absolute;
            z-index:2;
            width:100%;
            top:50%;
            left:0;
            transform: translateY(-50%);
          }
        }
        .title {
          font-size:$titleFontSize;
          font-weight:400;
          color:rgba(51,51,51,1);
        }
        .tip {
          font-size:$tipFontSize;
          font-weight:400;
          color:rgba(153,153,153,1);
        }
        .tip-sub {
          display:flex;
          font-size:$titleFontSize;
          font-weight:400;
          color:rgba(153,153,153,1);
          .progress {
            font-size:0;
          }
        }
      }
      .btn {
        width:114px;
        height:60px;
        line-height:60px;
        background:rgba(242,242,242,1);
        border-radius:4px;
        font-size:28px;
        font-weight:400;
        color:rgba(102,102,102,1);
        text-align: center;
        &.btn-red {
          background:rgba(255,255,255,1);
          border:1px solid $theme-color;
          border-radius:4px;
          font-size:28px;
          font-weight:400;
          color:$theme-color;
        }
      }
    }
  }

  .screen-main {
    margin: 0 3%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    .box {
      width: 100%;
    }
    .item {
      height: 470px;
      background: #FFFFFF;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 59, 0.1);
      border-radius: 10px;
      padding: 20px 22px;
      text-align: center;
      margin-bottom: 20px;
      .item-img {
        display: inline-block;
        width: 296px;
        height: 296px;
      }
      .item-info {
        text-align: left;
        .left {
          font-size: 14PX;
        }
        .right {
          font-size: 12PX;
          float: right;
          color: #999999;
        }
      }
      .tip {
        text-align: left;
        color: #999999;
        .tip-num {
          color: #EC0C0C;
          font-size: 14PX;
          margin-right: 10px;
        }

        .right {
          float: right;
          font-size: 12PX;
          width: 110px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border: 1px solid #EC0C0C;
          color: #EC0C0C;
          border-radius: 10px;

        }
      }

    }

  }
</style>
